<template>
  <view v-if='!finish' class="modal">

    <view class="angle" :class="step.placement"
          :style="{top:angle.top+'px',left:angle.left+'px',opacity: loaded?1:0}"></view>

    <view class="step" id="direct"
          :style="{top:position.top+'px',left:position.left+'px',width:position.width+'px',opacity: loaded?1:0}">

      <view class="content">{{ step.content }}</view>

      <view class="button">
        <view class="cancel" @click="setFinish">关闭指引</view>
        <view class="next" @click="next">{{ steps.length === current + 1 ? "重新学习" : "下一步" }}</view>
      </view>

    </view>
  </view>
</template>

<script setup>
import $ from "@/common/util/jquery.js"
import system from "@/store/system.js";

import {computed, getCurrentInstance, onMounted, reactive, ref, watch} from "vue";


const props = defineProps(['steps', 'parent', 'next', 'index']); //步骤相关数据
const emit = defineEmits(['next']); //下一步的自定义事件
const systems = system(); //系统信息
const current = ref(0); //当前组件的位置

const step = computed(() => {
  return props.steps[current.value];
});


/* 分步指引 */
const finish = ref(uni.getStorageSync(props.index));

const setFinish = () => {
  finish.value = true;
  uni.setStorageSync(props.index, 1)
}

/* 下一步 */
const next = () => {
  if (props.steps.length > current.value + 1) {
    current.value++;
  } else {
    current.value = 0;
  }
}


/* 组件的位置信息 */
const position = reactive({
  width: 0,
  height: 0,
  top: 0,
  left: 0
});

/* 组件的位置信息 */
const angle = reactive({
  top: 0,
  left: 0
});

const that = $("#direct", getCurrentInstance());
const loaded = ref(false); //加载完毕？

/* 更新组件的大小信息 */
const update = async () => {

  loaded.value = false; //显示组件


  let el_position = {
    width: 0,
    height: 0,
    top: 0,
    left: 0
  };

  const el = $(step.value.el, step.value.component ? props.parent.refs[step.value.component] : false);


  /* 元素选择 */
  await el.position().then((res) => {
    if (!res) return;
    el_position = res;
  });

  /* 计算可展示的边界 */
  let boundWidth = systems.info.screenWidth;
  let boundHeight = systems.info.screenHeight;

  /* 获取元素本身的大小 */
  await that.position().then(res => {
    if (!res) return;
    position.width = boundWidth * 0.65;
    position.height = res.height;
  });


  /* 判断组件展示的方向 */
  switch (true) {

    case step.value.placement === "left": {

      angle.top = el_position.top + (el_position.height / 2) - 5;
      angle.left = el_position.left - 5;

      position.top = el_position.top + (el_position.height / 2) - (position.height / 2);
      position.left = el_position.left - 5 - position.width;

      /* 边界检查 */
      if (position.top < 10) {
        position.top = 10;
      }

      if (position.left < 10) {
        position.left = 10;
        position.width = el_position.left - 15;
      }

      break;
    }

    case step.value.placement === "bottom": {

      angle.top = el_position.top + el_position.height - 5;
      angle.left = el_position.left + (el_position.width / 2) - 5;

      position.top = el_position.top + el_position.height + 5;
      position.left = el_position.left - (position.width / 2) + (el_position.width / 2);

      /* 边界检查 */
      if (position.top < 10) {
        position.top = 10;
      }

      if (position.left + position.width >= boundWidth) {
        position.left = boundWidth - position.width - 15;
      }

      break;
    }

    case step.value.placement === "top": {

      angle.top = el_position.top - 5;
      angle.left = el_position.left + (el_position.width / 2) - 5;

      position.top = el_position.top - position.height - 5;
      position.left = el_position.left - (position.width / 2) + (el_position.width / 2);

      /* 边界检查 */
      if (position.top < 10) {
        position.top = 10;
      }

      if (position.left + position.width >= boundWidth) {
        position.left = boundWidth - position.width - 15;
      }

      break;
    }

    case step.value.placement === "right": {

      angle.top = el_position.top + (el_position.height / 2) - 5;
      angle.left = el_position.left + el_position.width;

      position.top = el_position.top + (el_position.height / 2) - (position.height / 2);
      position.left = el_position.left + el_position.width + 10;

      /* 边界检查 */
      if (position.top < 10) {
        position.top = 10;
      }

      if (position.left + position.width >= boundWidth) {
        position.width = boundWidth - position.left - 30;
      }

      break;
    }

    default: {
      break;
    }

  }


  loaded.value = true; //显示组件

}


/* 实时同步 */
watch(current, update);
/* 获取组件的大小 */
onMounted(update);
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
